<template>
  <view>
    <view class="placeOrder">
      <view class="status">
        待支付
      </view>
      <view class="price">
        <text class="unit">
          ￥
        </text>
        <text class="value">
          {{total_price}}
        </text>
      </view>
      <view class="runningTime" style="display: flex;justify-content: center;">
        <text>交易剩余时间</text>：<uv-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></uv-count-down>
      </view>
      <view class="lines">
        <view class="lines-fl"></view>
        <view class="lines-title">商品清单</view>
        <view class="lines-fl"></view>
      </view>
      <view class="goods">
        <view v-for="(item, index) in orderList" :key="index">
          <view class="good-item" v-for="(item2, index2) in item.list" :key="index2">
            <image class="goosImg" :src="item2.product.image" mode=""></image>
            <view class="info">
              <view class="goodName">
                {{item2.product.store_name}}
              </view>
              <view class="info-tb">
                <view class="info-tb-fl">数量 {{item2.cart_num}}</view>
                <view class="info-tb-fr">预计收益 ￥{{summaryprice(item2.productAttr.ot_price,item2.productAttr.price,item2.cart_num)}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="lines">
        <view class="lines-fl"></view>
        <view class="lines-title">支付方式</view>
        <view class="lines-fl"></view>
      </view>
      <view class="payInfo">
        <view class="pay-item" v-for="(item, index) in payInfo" :key="index" @click="setIndex(index)">
          <image class="img" :src="item.url" mode=""></image>
          <view class="middle">
            <text class="txt1">
              {{item.name}}
            </text>
            <text class="txt2">
              {{item.value}}
            </text>
          </view>
          <image class="img2"
            :src="currentIndex==index?'../../static/images/radioActive.png':'../../static/images/radio.png'" mode="">
          </image>
        </view>
      </view>

    </view>
    <view class="footer">
      <view class="btn" @click="toPaySuccessPage">
        立即支付
      </view>
    </view>

  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  import tools from "../../utils/index.js"
  export default {
    data() {
      return {
        payInfo: [{
            url: "../../static/images/pay1.png",
            name: "微信",
            type: "weixin"
          },
          {
            url: "../../static/images/pay2.png",
            name: "余额：",
            value: 0,
            type: "balance"
          }
        ],
        currentIndex: 0,
        params: {
          cart_id: [],
          pay_type: "pc",
          key: ""
        },
        total_price: "",
        orderList: [],
        parInfo: {
          id: "",
          type: "weixin"
        }
      }
    },
    onLoad(option) {
      console.log("创建订单的cart_ids", decodeURIComponent(option.cart_id));
      console.log("创建订单的cart_ids-数据类型", typeof decodeURIComponent(option.cart_id));
      let ids = decodeURIComponent(option.cart_id);
      this.params.cart_id = ids.split(",");
      this.getComfrimOrder();
      this.getUserInfo();
    },
    methods: {
      summaryprice(price1,price2,count){
        let amount = tools.$h.Sub(price1,price2);
        let total = tools.$h.Mul(amount,count);
        return total;
      },
      getUserInfo() {
        reqApi.getUserInfo({}).then(res => {
          console.log("获取用户信息", res);
          this.payInfo[1].value = res.data.now_money;
          uni.setStorageSync("userInfo", res.data);
        })
      },
      // 确认订单
      getComfrimOrder() {
        console.log("获取支付信息-参数", this.cart_id);
        reqApi.comfrimOrder({
          cart_id: this.params.cart_id
        }).then(res => {
          this.params.key = res.data.key;
          this.total_price = res.data.total_price;
          this.orderList = res.data.order;
          console.log("支付所需参数集合", this.params);
          reqApi.createOrder(this.params).then(res => {
            this.parInfo.id = res.data.order_id;
          })
        })
      },
      setIndex(index) {
        this.currentIndex = index;
        this.parInfo.type = this.payInfo[index].type;
      },
      toPaySuccessPage() {
        let self = this;
        reqApi.payOrder(self.parInfo).then(res => {
          if (self.parInfo.type == "weixin") {
            let jsConfig = res.data.result.config;
            console.log("orderInfo", jsConfig);
            uni.requestPayment({
              provider: 'wxpay',
              orderInfo: jsConfig,
              success: (e) => {
                uni.showToast({
                  title: "支付成功",
                  duration: 1500,
                  icon: 'none',
                  mask: true
                })
                setTimeout(() => {
                  uni.navigateTo({
                    url: "/pages/home/paySuccess"
                  })
                }, 1500)
              },
              fail: (e) => {
                 uni.showToast({
                   title: "支付失败",
                   duration: 1500,
                   icon: 'none',
                   mask: true
                 })
              }
            });
          } else {
            uni.showToast({
              title: "支付成功",
              icon: 'none',
              mask: true,
              duration: 1500,
            })
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/home/paySuccess"
              })
            }, 1500)
          }

        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    padding: 0 30rpx;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: 30rpx;
    padding: 0 30rpx;
    box-sizing: border-box;

    .btn {
      width: 100%;
      height: 88rpx;
      background: #EEA800;
      border-radius: 200rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .lines {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;

    .lines-fl {
      flex: 1;
      width: 100%;
      height: 2rpx;
      background: #eee;
    }

    .lines-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      margin: 0 90rpx;
    }
  }

  .placeOrder {
    padding: 60rpx 30rpx;
    box-sizing: border-box;
    background: #fff;

    .status {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      text-align: center;
    }

    .price {
      display: flex;
      align-items: flex-end;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #FF4F44;
      justify-content: center;
      margin-top: 20rpx;

      .unit {
        font-size: 28rpx;
      }

      .value {
        font-size: 60rpx;
      }
    }

    .runningTime {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      margin-top: 40rpx;
      text-align: center;
    }

    .goods {
      margin-top: 30rpx;

      .good-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30rpx;

        .goosImg {
          width: 160rpx;
          height: 160rpx;
          border-radius: 20rpx;
          margin-right: 20rpx;
        }

        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;

          .goodName {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #222222;
          }

          .info-tb {
            display: flex;
            justify-content: space-between;

            .info-tb-fl {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #666666;
            }

            .info-tb-fr {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #FF4F44;
            }
          }
        }
      }
    }

    .payInfo {
      padding: 0 30rpx;
      box-sizing: border-box;
      margin-top: 30rpx;

      .pay-item:first-child {
        margin-bottom: 40rpx;
      }

      .pay-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .img {
          width: 48rpx;
          height: 48rpx;
        }

        .middle {
          flex: 1;
          display: flex;
          margin: 0 20rpx;

          .txt1 {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 30rpx;
            color: #222222;
          }

          .txt2 {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #999999;
          }
        }

        .img2 {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
</style>